<template>
  <div class="content">
      <div class="aircraft-types">
        <table>
          <thead>
            <tr>
              <th class="sticky-col">航空器类型</th>
              <!-- <th>航空器类型 I</th>
              <th>航空器类型 II</th>
              <th>航空器类型 III</th>
              <th>航空器类型 IV</th> -->
              <th>小型机</th>
              <th>中型机</th>
              <th>大型机</th>
              <th>eVTOL</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(type, index) in aircraftTypes" :key="index">
              <!-- 固定的行名 -->
              <td class="sticky-col">{{ type.name }}</td>
              <!-- 动态读取的数值 -->
              <td>{{ type.values[0] }}</td>
              <td>{{ type.values[1] }}</td>
              <td>{{ type.values[2] }}</td>
              <td>{{ type.values[3] }}</td>
            </tr>
          </tbody>
        </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ManagementPlatform',
  props: {
    aircraftTypes: Array
  }
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-between;
  width:100%;
  height:100%;
  justify-content: center;
}

.aircraft-types {
  width: 100%;
  height:100%;
  display: flex;
  justify-content: center;
}

table {
  width: 100%;
  height:100%;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  border-collapse: collapse;
  background-color: rgb(7, 18,31,0.9); 
  color: white;
  text-align: center;
  white-space: nowrap; /* 文本不换行 */
  font-size: 0.8vw;
}

th, td {
  border: 0.1vh  solid rgba(3, 72, 133, 0.5);
  font-family: AlibabaPuHuiTi_2_55_Regular;
  padding: 0.1vh;
  font-size: 0.875rem;
}

thead th {
  position: sticky;
  background-color: transparent; /* 固定列的背景颜色 */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  z-index: 2; /* 确保表头在表格内容上方 */
  padding: 0.5vh;
}

td.sticky-col {
  position: sticky;
  left: 0;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  background-color: transparent; /* 固定行的背景颜色 */
}

tbody tr:nth-child(even) {
  font-family: AlibabaPuHuiTi_2_55_Regular;
  background-color: transparent; /* 隔行透明背景 */
}

tbody tr:hover {
  font-family: AlibabaPuHuiTi_2_55_Regular;
  background-color: transparent; /* 鼠标悬停时背景透明 */
}
</style>